<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高德地图API完整测试</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            font-family: "Microsoft YaHei", sans-serif;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        h1 {
            color: #0078ff;
        }
        #map-container {
            width: 100%;
            height: 500px;
            border: 1px solid #ccc;
            margin-bottom: 20px;
        }
        .status {
            padding: 10px;
            margin-bottom: 20px;
            border-radius: 4px;
        }
        .success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .info {
            background-color: #e2f3fd;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
        button {
            padding: 10px 15px;
            background-color: #0078ff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        button:hover {
            background-color: #0056b3;
        }
        .controls {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>高德地图API完整测试</h1>
        
        <div class="controls">
            <button onclick="loadMap()">加载地图</button>
            <button onclick="checkApiStatus()">检查API状态</button>
        </div>
        
        <div id="status-container" class="status info">
            准备加载地图，请点击"加载地图"按钮...
        </div>
        
        <div id="map-container"></div>
        
        <div>
            <h3>测试信息</h3>
            <ul>
                <li>API密钥: <code id="api-key">73fbf010867aee81f74c91d3a77f4e05</code></li>
                <li>API版本: <code>v2.0</code></li>
                <li>浏览器: <span id="browser-info"></span></li>
                <li>加载时间: <span id="load-time"></span></li>
            </ul>
        </div>
    </div>
    
    <script>
        // 显示浏览器信息
        document.getElementById('browser-info').textContent = navigator.userAgent;
        
        // 更新状态显示
        function updateStatus(message, type) {
            const statusContainer = document.getElementById('status-container');
            statusContainer.className = `status ${type}`;
            statusContainer.textContent = message;
        }
        
        // 加载地图
        function loadMap() {
            updateStatus('正在加载地图API...', 'info');
            
            const startTime = new Date().getTime();
            document.getElementById('load-time').textContent = '加载中...';
            
            // 清除之前可能存在的脚本
            const oldScript = document.getElementById('amap-api');
            if (oldScript) {
                oldScript.remove();
            }
            
            // 动态加载高德地图API
            const script = document.createElement('script');
            script.id = 'amap-api';
            script.type = 'text/javascript';
            script.src = `https://webapi.amap.com/maps?v=2.0&key=${document.getElementById('api-key').textContent}&callback=initMap`;
            
            // 处理加载错误
            script.onerror = function() {
                const endTime = new Date().getTime();
                const loadTime = (endTime - startTime) / 1000;
                document.getElementById('load-time').textContent = `${loadTime}秒 (加载失败)`;
                updateStatus('地图API加载失败！可能是网络问题或API密钥无效。', 'error');
            };
            
            document.head.appendChild(script);
        }
        
        // 初始化地图
        function initMap() {
            try {
                const endTime = new Date().getTime();
                const startTime = new Date().getTime() - 1000; // 估计值
                const loadTime = (endTime - startTime) / 1000;
                document.getElementById('load-time').textContent = `${loadTime}秒`;
                
                const map = new AMap.Map('map-container', {
                    zoom: 10,
                    center: [119.95, 30.53] // 德清中心点
                });
                
                // 添加标记
                const marker = new AMap.Marker({
                    position: [119.953931, 30.533385], // 如家酒店位置
                    title: '如家丽岚睿柏云酒店'
                });
                
                map.add(marker);
                
                // 添加控件
                map.addControl(new AMap.Scale());
                map.addControl(new AMap.ToolBar());
                
                updateStatus('地图加载成功！', 'success');
            } catch (error) {
                updateStatus(`地图初始化失败: ${error.message}`, 'error');
            }
        }
        
        // 检查API状态
        function checkApiStatus() {
            updateStatus('正在检查API状态...', 'info');
            
            const img = new Image();
            const apiKey = document.getElementById('api-key').textContent;
            img.src = `https://restapi.amap.com/v3/ip?key=${apiKey}`;
            
            img.onload = function() {
                updateStatus('API服务器可访问', 'success');
            };
            
            img.onerror = function() {
                // 使用JSONP方式尝试请求
                const script = document.createElement('script');
                script.src = `https://restapi.amap.com/v3/ip?key=${apiKey}&output=json&callback=handleApiCheck`;
                document.head.appendChild(script);
            };
        }
        
        // 处理API检查结果
        function handleApiCheck(response) {
            if (response && response.status === '1') {
                updateStatus('API密钥有效，服务器可访问', 'success');
            } else {
                updateStatus('API密钥可能无效，或服务器无法访问', 'error');
            }
        }
    </script>
</body>
</html> 